<template>
  <div class="bg-gray h-100 nav-no-scroll d-flex flex-column">
    <div class="bg-green py-2 px-4 d-flex">
      <el-input
         class="input-radius"
         placeholder="输入关键字"
         prefix-icon="el-icon-search"
         @focus="show = true"
         @blur="show = false"
         @keyup.enter.native="search()"
         v-model="keyword">
       </el-input>
       <el-button v-show="show" type="text ml-3 text-white" style="height: 30px;line-height: 30px;padding: 0;" @click="search()">搜索</el-button>
    </div>
    <div class="span scroll-bg" v-loading="ecs.loading && ecs.pageIndex === 1">
      <scroll
            ref="scroll"
            :mouse-wheel="true"
            :pull-up-load="pullUpLoad"
            :scrollbar="true"
            @pullingUp="pullingUp"
            >
        <div class="card border-top border-bottom" style="border: none;" v-show="ecs.rows.length === 0">
          <div class="card-body text-center">
            <p>暂无数据</p>
          </div>
        </div>
        <div class="card border-top border-gray-300" :class="{'border-bottom': index === ecs.rows.length - 1}" v-for="(item, index) in ecs.rows" :key="index"
          style="border: none;border-color: #dee2e6;margin-bottom: 10px;" @click="lookEc(item)">
          <div class="card-body" style="padding: 12px;">
            <div class="d-flex">
              <div class="mr-3" style="width: 80px;">
                <!-- <div class="zoomImage" v-lazy:background-image="item.basicThumbnails"></div> -->
                <div class="zoomImage" :style="{backgroundImage: 'url('+ item.basicThumbnails +')'}"></div>
              </div>
              <div class="content flex-all">
                <p class="fz-15 font-weight-bold" style="line-height: 18px;margin-bottom: 8px;">{{item.basicTitle}}</p>
                <p class="mb-2 text-over-3 fz-13 text-muted">{{item.basicDescription}}</p>
                <footer class="d-flex justify-content-between fz-12" style="color: #ced4da;">
                  <div>
                    <span>{{$formatYMD(item.ctime)}}</span>
                  </div>
                  <div>
                    <span class="el-icon-view text-tdsuccess" style="padding-top: 3px;margin-right: 3px;"></span>
                    <span class="mr-2">{{item.browseNumber}}</span>

                    <img src="../../assets/dianzan2.png" class="img-responsive" style="width: 14px;position: relative;top: -3px;" alt="">
                    <span class="mr-2">{{item.likeNumber}}</span>

                    <span class="el-icon-edit-outline text-tdsuccess" style="padding-top: 3px;margin-right: 3px;"></span>
                    <span>{{item.comments}}</span>
                  </div>
                </footer>
              </div>
            </div>
          </div>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
import PagedList from '../../plugins/PagedList'
import EcCard from './EcCard'

export default {
  name: "eclist",
  title: "企业列表",
  data () {
    return {
      ecs: new PagedList('/mscs/home/findEnterpriseBasic', 10),
      pullUpLoad: {
        txt: {
          more: '加载更多',
          noMore: '没有了'
        }
      },
      keyword: '',
      show: false
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search() {
      this.ecs.search({search: this.keyword})
    },
    pullingUp () {
      if (!this.ecs.hasMore) {
        this.$refs.scroll.forceUpdate(this.ecs.hasMore)
        return
      }
      this.ecs.addLoad().then(() => {
        this.$refs.scroll.forceUpdate(this.ecs.hasMore)
      })
    },
    lookEc (row) {
      // this.$router.push({name: 'echome', query: {row: JSON.stringify(row)}})
      this.$router.push({name: 'echome', params: {id: row.modelId}})
    }
  },
  components: {
    EcCard
  }
}
</script>
